Similarity Principle in Visual Design 相似性原則及其在視覺設計中的應用

相似性原則是格式塔心理學中的重要概念之一,指出具有相似視覺特徵的設計元素會被使用者視為相關或屬於同一組。在使用者介面設計中,遵循這一原則可以幫助使用者快速理解介面結構和功能。

相似性原則的定義

相似性原則表明,當元素具有某種共同的視覺特徵(如顏色、形狀或大小)時,使用者傾向於將它們視為相關聯的群組,而那些外觀不同的元素則被認為屬於不同的組。

例如:在一個由圓形和三角形組成的網格中,如果所有圓形排列在一列,所有三角形排列在另一列,使用者會更傾向於按列分組而非按行分組。

相似性原則的應用場景

1. 利用顏色指示關係

顏色是最顯眼的相似性特徵之一,能有效傳達元素之間的關聯:

示例:連結顏色的統一性

在介面設計中,連結通常使用統一的顏色來表明它們可點選。這種一致性讓使用者可以輕鬆識別哪些文字是互動元素。

反例:誤導性的顏色關聯

如果一個圖示和按鈕使用相同的顏色,但圖示不可點選,這可能會導致使用者誤以為它們具有相同功能。
在信合銀行訊息中心的“提交”按鈕與“取消”和“新增附件”按鈕顏色相同,並與這些次要操作融為一體

2. 利用形狀表示分組

形狀是另一種傳達元素關係的有效方式:

示例:按鈕形狀的統一性

在 Asos.com 上,所有類別導航按鈕可能設計為圓角矩形,以表示它們具有相似功能,而過濾器按鈕可能是方形,以傳達不同的用途。

警惕:過於相似的形狀

如果不同類別的圖示形狀過於相似,可能導致使用者誤認為它們之間具有相關性。例如,在一個導航選單中,兩個類別使用完全相同的圖示會混淆使用者。

Etsy.com:“免費送貨”和“暢銷書”這兩個指標被包含在不同顏色的圓角矩形中,“暢銷書”還包含一個特殊圖示。這些特徵使這兩個指標易於區分。如果它們是相同的顏色,這種共同的形狀會導致它們看起來過於相似,並會減慢使用者的速度。
箭頭圖示同樣被放置在每個可點選元素的旁邊。這表明它們在功能上是相似的,儘管字型處理有所不同。

3. 利用大小傳達重要性

大小可以用於強調內容的重要性和分組:

在這個圖形中,較大的圓圈可能會被認為是相互關聯的,並且與較小的圓圈屬於不同的組。

示例:產品列表頁面中的一致大小.在產品列表中,每個產品的展示卡片通常具有相同的大小和形狀,以表明它們屬於同一類內容。

產品系列的促銷活動以比周圍產品列表更大的尺寸展示,以有效地傳達它們是一種不同型別的內容元素。
使用者將 Martha Stewart操作指南文章右側欄中的影片誤認為是廣告,因為它的大小和形狀與該區域的其他廣告相似。

反例:混淆的大小設計

如果廣告和重要內容在大小和形狀上過於相似,使用者可能會將重要內容誤認為廣告,從而忽略它。

4. 其他相似性特徵

除了顏色、形狀和大小外,還有許多其他特徵可以用來傳達元素之間的關係:

字型樣式:一致的字型加粗或傾斜可以表明文字的相關性。

方向:元素的排列方向可以傳達它們的功能或意義相似性。

動畫:一致的動畫效果可以增強使用者對元素功能的理解。

設計中的注意事項